<template>
  <!--创建地图容器元素-->
  <div>
    <div id="map" />
    <!-- <el-button type="primary" @click="handleAddPoint">添加标注点</el-button> -->
  </div>

</template>
<script>
export default {
  name: 'TdtMap',
  data() {
    return {
      map: {},
      longitude: 116.403963,
      latitude: 39.915119,
      lay: null
    }
  },

  mounted() {
    // 初始化天地图

    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=50b2c51efa2dee8028206335f1d44ce6'
    document.body.appendChild(script)
    setTimeout(() => {
      this.load()
    }, 1000)
  },

  methods: {
    // 初始化天地图
    load() {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log('地图初始化成功')
          resolve(window.T)
          reject('error')
        }
      })
      init.then(T => {
        const imageURL = 'http://t0.tianditu.gov.cn/ter_c/wmts?' +
       'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
       '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=50b2c51efa2dee8028206335f1d44ce6'

        this.lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
        // this.map.addLayer(this.lay)
        this.map = new T.Map('map')
        this.map.centerAndZoom(new T.LngLat(110.40769, 30.89945), 4)
        // 创建卫星和路网的混合视图
        console.log(window)
        this.map.setMapType(window.TMAP_HYBRID_MAP)
        // 允许鼠标滚轮缩放地图
        this.map.enableScrollWheelZoom()
      })
    }

  }

}

</script>

<style scoped>

#map {
    width: 1800px;
    height: 1000px;
    z-index: 100;
}
</style>
